<template>
    <div class="ticket-index-wrapper">
        <Tabs :animated="false" @on-tab-remove="deleteTicketTab" closable type="card" v-model="currentTab">
            <TabPane :closable="false" label="工单列表" name="list">
                <ticket-list></ticket-list>
            </TabPane>

            <TabPane :closable="false" label="新建工单" name="create">
                <ticket-create></ticket-create>
            </TabPane>

            <TabPane
                :key="'ticket-edit-'+item.id"
                :label="getEditTabLabel(item)"
                :name="'edit/'+ item.id"
                v-for="item in opendTicketTabs.edit"
            >
                <ticket-create :ticket-info="item"></ticket-create>
            </TabPane>

            <TabPane
                :key="'ticket-detail-'+item.id"
                :label="getDetailTabLabel(item)"
                :name="'detail/'+ item.id"
                v-for="item in opendTicketTabs.detail"
            >
                <ticket-detail :ticket-info="item"></ticket-detail>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { ServiceType } from '@/libs/const'
import ticketCreate from './create-components/ticket-create'
import ticketList from './list-components/ticket-list'
import ticketDetail from './detail-components/ticket-detail'
export default {
  components: {
    ticketCreate,
    ticketList,
    ticketDetail
  },
  computed: {
    ...mapGetters(['opendTicketTabs']),

    currentTab: {
      get () {
        return this.$store.state.ticket.currentTicketTab
      },
      set (name) {
        if (name === this.currentTab) return
        this.$router.push(`/ticket/${name}`)
        this.setCurrentTicketTab(name)
      }
    }
  },

  watch: {
    $route (n) {
      this.setActiveTabByRoute()
    }
  },

  mounted () {
    this.$store.dispatch('initAllCities')
    // 防止直接输入路由进详情页
    const { name } = this.$route
    if (
      (name === 'ticket-detail' && !this.opendTicketTabs.detail.length) ||
            (name === 'ticket-edit' && !this.opendTicketTabs.edit.length)
    ) {
      this.$router.push('/ticket/list/1')
    }

    this.setActiveTabByRoute()
  },

  methods: {
    ...mapActions(['setCurrentTicketTab', 'removeTicketTab', 'clearTicketTab']),

    setActiveTabByRoute () {
      const { ticketId } = this.$route.params
      const { name } = this.$route

      switch (name) {
        case 'ticket-detail':
          this.setCurrentTicketTab(`detail/${ticketId}`)
          break

        case 'ticket-list':
          this.setCurrentTicketTab('list')
          break

        case 'ticket-create':
          this.setCurrentTicketTab('create')
          break

        case 'ticket-edit':
          this.setCurrentTicketTab(`edit/${ticketId}`)
          break
      }
    },

    deleteTicketTab (name) {
      const [type, ticketId] = name.split('/')

      this.removeTicketTab({ type, ticketId })
      this.$router.push('/ticket/list/1')
    },

    getDetailTabLabel ({ ticket_sn, service_type }) {
      const ticketType = ServiceType[service_type] || '未知'
      return `${ticketType}-${ticket_sn}`
    },

    getEditTabLabel ({ ticket_sn, service_type }) {
      return `编辑-${ticket_sn}`
    }
  },

  beforeDestroy () {
    this.clearTicketTab()
  }
}
</script>

<style lang="less">
.ticket-cut-outs {
    position: absolute;
    right: 11.75%;
    z-index: 10;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    &-top {
        border-bottom: 1px solid #bbbec4;
        top: -10px;
    }
    &-bottom {
        border-top: 1px solid #bbbec4;
        bottom: -10px;
    }
}

.ticket-checkbox {
    position: absolute;
    left: -25px;
}
.ticket-edit-form {
    &-item {
        padding: 20px 40px 10px;
        border-bottom: 1px solid #ccc;
    }

    .ivu-form-item {
        margin-bottom: 10px;
    }
}

.as-edit {
    &-row {
        padding-left: 20px;
        margin-top: 10px;
        margin-bottom: 15px;
        word-break: break-all;

        &.is-b {
            padding-left: 0;
        }
    }

    &-key {
        margin-right: 10px;
    }

    &-repeat {
        padding-bottom: 8px;
        overflow: hidden;
        border-bottom: 1px solid #aaa;

        &:hover {
            background-color: #f5f7fa;
        }
    }

    &-repeat:last-child {
        border-bottom: 0;
    }
}
</style>
